<link  type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
      dir: 'https://www.layuicdn.com/layui/' 
      ,version: false 
      ,debug: false 
      ,base: '' 
    });
</script>



<!-- 框架的组件文档 "https://www.layui.com/doc/modules/carousel.html" -->
<div class="layui-carousel" id="test1">
	<div carousel-item>
		<div class="carousel-item"><img src="http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg" style="width: 100%;height: 100%" ></div>
		<div class="carousel-item"><img src="http://img3.imgtn.bdimg.com/it/u=2208162519,4010854312&fm=26&gp=0.jpg" style="width: 100%;height: 100%" ></div>
		<div class="carousel-item"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2472153115,3034378969&fm=26&gp=0.jpg" style="width: 100%;height: 100%" ></div>
	</div>
</div>

<script type="text/javascript">
	//轮播图初始化
	layui.use('carousel', function(){
		var carousel = layui.carousel;
		
	  //建造实例
	  carousel.render({
	  	elem: '#test1'
	    ,width: '100%' //设置容器宽度
	    ,arrow: 'always' //始终显示箭头
	    //,height:'100%'
	});
	});
	//事件监听
	$('.layui-carousel .carousel-item').click(function(){
		console.log($(this).index());
		//dosomething
	});
</script>